<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键修饰符</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div id="case4-demo3" class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" >账户</label>
            <div class="col-sm-10">
                <input type="text" placeholder="请输入账户" class="form-control" v-on:keydown="keyShow($event)">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" >密码</label>
            <div class="col-sm-10">
                <input type="password" placeholder="请输入密码" class="form-control" v-on:keydown.13="keyShow($event)">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    /*Vue.config.keyCodes给 v-on 自定义键位别名*/
    Vue.config.keyCodes={
        "回车":13,
        "a":46
    }
    var case4Demo3=new Vue({
        el:"#case4-demo3",
        methods:{
            keyShow:function (e) {
                console.log(e.keyCode)
                if (e.keyCode==13){
                    console.log("按下回车键")
                }
            }
        }
    })
</script>
</body>
</html>